<!--
 * @Descripttion: 
 * @version: v1
 * @Author: Terry
 * @Date: 2020-09-25 14:43:11
 * @LastEditors: Terry
 * @LastEditTime: 2024-04-25 18:00:39
-->
<template>
  <div>
    <el-container @click.native="handleTime">
      <el-header class="p-0 " style="z-index:999;">
        <navbar
          style="position: fixed;background: #409EFF; width:100%;z-index:999;height:60px"
        ></navbar>
      </el-header>
      <el-main class="p-b-0">
        <el-card class="p-l-10">
          <div slot="header">
            <div class="font-size-23">
              <span class="iconfont ali-icon-yingyong font-size-23"></span>
              {{$t('platform.modules.selectApp')}}
            </div>
          </div>
          <div
            style="min-height: calc(100vh - 245px); padding:0 10px"
            v-loading="pageLoad"
            :element-loading-text="$t('global.loading')"
            class="module-containers"
          >
              <vue-context-menu
                class="context-menu"
                :contextMenuData="contextMenuData"
                @toModule="openNew()"
              ></vue-context-menu>
          <div class="module-item-box"  v-for="(value, key) in list"
              :key="key">
            <div
              class="module-item"
              @click="toModule(value.module)"
              @contextmenu.prevent="rightShow(value.module, 2)"
            >
              <div
                :class="'iconfont ali-icon-' + value.icon + ' moudule-icon'"
              ></div>
              <strong class="module-title">{{ value.name }}</strong>
            </div>
          </div>
          </div>
        </el-card>
        <el-footer>
          <foot></foot>
        </el-footer>
      </el-main>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.module-item {
border-radius: 20px;
  background: #d9ecff;
  border: 1px solid #dddddd;
   width: 150px;
  height: 150px;
  text-align: center;
  transition: all .4s;
  cursor: pointer;
}
.module-item-box{
   margin-right: 20px;
    margin-top: 10px;
    float: left;
    width: 160px;
    height: 160px;
  }
.module-item:hover{
  // width: 160px;
  // height: 160px;
  transform:scale(1.1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.moudule-icon {
  color: #2d8be9;
  line-height: 110px;
  font-size: 50px;
}
.module-title {
  color: #2d8be9;
  font-size: 15px;
}
.context-menu {
  padding-left: 0;
  font-family: "微软雅黑";
}
 ::v-deep .btn-wrapper-simple {
  height: 30px !important;
}
 ::v-deep .vue-contextmenu-listWrapper .context-menu-list {
  margin: 0 !important;
}
 ::v-deep .nav-name-right {
    text-align:center !important;
  margin: 0 26px !important;
  height: auto !important;
  line-height:25px !important
}
 ::v-deep .vue-contextmenu-listWrapper .context-menu-list {
  margin: 0 !important;
}
</style>
<script>
import {  getList } from "../api/module"
import {  getModuleAside } from "../api/menu"
export default {
  data() {
    return {
      list: {},
      pageLoad: true,
      // 菜单数据
      contextMenuData: {
        axis: {
          x: null,
          y: null,
        },
        menulists: [
          {
            fnHandler: "toModule",
            btnName: this.$t('platform.modules.openNewPage'),
          },
        ],
      },
      module: "",
      status: null,
    };
  },
  methods: {
    rightShow(module, status) {
      this.module = module;
      this.status = status;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      this.contextMenuData.axis = {
        x,
        y,
      };
    },
    openNew() {
      this.toModule(this.module, this.status);
    },
    getPageData() {
      getList()
        .then((res) => {
          this.list = res.data;
        })
        .finally((res) => {
          this.pageLoad = false;
        });
    },
    handleTime() {
      let firstTime = this.firstTime,
        lastTime = new Date().getTime(),
        timeOut = 30 * 60 * 1000;
      if (lastTime - firstTime > timeOut) {
        this.$message.error(this.$t('platform.modules.reloginMessage'));
        // var lang = sessionStorage.getItem('language');
        sessionStorage.clear();
        // sessionStorage.setItem('language',lang);
        this.$router.push({ name: "login" });
      } else {
        this.firstTime = lastTime;
      }
    },
    toModule(module, status) {
      var load = this.loading();
      getModuleAside({ module: module })
      .then((res) => {
        var aside = res.data["aside"],
        button = res.data["button"];
        sessionStorage.setItem("module",module);
        sessionStorage.setItem("modulesButtonType", JSON.stringify(button));
        sessionStorage.setItem("modulesAside", JSON.stringify(aside));
        
        var url = aside[0].pageUrl || aside[0]['children'][0].pageUrl;
        console.log(url);
        if(url.indexOf('http')>-1){
          var token = sessionStorage.getItem('auxfaceToken'),
          uuid = sessionStorage.getItem('uuid'),
          puuid = sessionStorage.getItem('puuid'),
          cuuid = sessionStorage.getItem('corpCode');
          url = url + "?token=" + token + "&uuid=" + uuid  + "&prjCode=" + puuid + "&corpCode=" + cuuid 
          window.open(url, "_blank"); 
          return;
        }
          // if (aside[0].children) url = aside[0].children.pageUrl;
          if (status == 2) {
            let routeUrl = this.$router.resolve({ path: url });
            window.open(routeUrl.href, "_blank");
          } else {
            this.$router.push({ path: url });
          }
        })
        .finally((res) => {
          load.close();
        });
    },
    show() {},
  },

  mounted() {
    this.getPageData();
  },
};
</script>
